<template>
  <!-- <div class="editor-wrapper">
   
  </div> -->
  <div>
    <n-layout class="editor-wrapper">
      <n-layout-header bordered>
        <Header></Header>
      </n-layout-header>
      <n-layout has-sider sider-placement="left">
        <n-layout-sider
          collapse-mode="width"
          :collapsed-width="64"
          :width="220"
          bordered
          :on-after-enter="handleResize"
          :on-after-leave="handleResize"
        >
          <ComponentPanel></ComponentPanel>
        </n-layout-sider>
        <n-layout-content>
          <div style="display: flex; height: calc(100vh - 100px)">
            <n-layout has-sider sider-placement="right">
              <n-layout-content content-style="padding:12px;">
                <!-- <n-tabs size="small" class="tabs" type="segment" animated>
                  <n-tab-pane
                    display-directive="show"
                    class="pane"
                    name="screen"
                    tab="界面"
                  >
                  </n-tab-pane>
                  <n-tab-pane
                    class="pane"
                    display-directive="show"
                    name="table"
                    tab="表格"
                  >
                    <FeatureTable></FeatureTable>
                  </n-tab-pane>
                  <n-tab-pane
                    class="pane"
                    display-directive="if"
                    name="statics"
                    tab="统计"
                  >
                  </n-tab-pane>
                </n-tabs> -->
                <CenterPanel></CenterPanel>
              </n-layout-content>
              <n-layout-sider
                collapse-mode="width"
                :collapsed-width="0"
                :width="350"
                show-trigger="bar"
                bordered
                :on-after-enter="handleResize"
                :on-after-leave="handleResize"
              >
                <ConfigPanel></ConfigPanel>
              </n-layout-sider>
            </n-layout>
          </div>
        </n-layout-content>
      </n-layout>

      <n-layout-footer>
        <Footer></Footer>
      </n-layout-footer>
    </n-layout>
  </div>
</template>

<script lang="ts" setup>
import Header from "./page-layout/header-panel.vue";
import ComponentPanel from "./page-layout/component-panel.vue";
import Footer from "./page-layout/bottom-panel.vue";
import CenterPanel from "./page-layout/screen-panel.vue";
import ConfigPanel from "./page-layout/config-panel.vue";
import { useMapStore } from "@/store/map";
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import { useEventBus } from "@vueuse/core";
import { SwapHorizontal as SwapHorizontalIcon } from "@vicons/ionicons5";
import { useUserStore } from "@/store/user";
import { useFormStore } from "@/store/form";
const userStore = useUserStore();
const mapBus = useEventBus("map");
const route = useRoute();
const mapStore = useMapStore();
const formStore = useFormStore();

onMounted(async () => {
  await userStore.updateUserInfo();
  const id = route.query.id as string;
  formStore.pid = id;
  await formStore.getForm();
});
const handleResize = () => {
  // console.log("resize");
  // mapBus.emit({ type: "resize" });
};
</script>

<style lang="scss" scoped>
.editor-wrapper {
  height: 100%;
  box-sizing: border-box;
}
.trigger-bar {
  background-color: rgba(255, 255, 255, 0.1);
  display: "flex";
  justify-content: "center";
  align-items: "center";
  box-sizing: border-box;
}
.trigger-bar:hover {
  background-color: #63e2b7;
  filter: drop-shadow(0px 0px 10px #63e2b744);
}
.tabs {
  padding: 12px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 100px);
  overflow: hidden;
}
.pane {
  width: 100%;
  height: calc(100vh - 100px);
}
</style>
